<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 内边距</title>
    <style type="text/css">

        /* 内边距的百分比数值
           前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。
           所以，如果父元素的 width 改变，它们也会改变。
        */
        h1{
            padding: 10px 0.25em 2ex 20%;  /* 可以按照上,右,下,左 的顺序分别设置各边的内边距 各边都可以试用不同的单位和百分比 */
        }

        h1 {
            padding-top: 10px;
            padding-right: 0.25em;
            padding-bottom: 2ex;
            padding-left: 20%;
        }
        td.test1{
            padding: 1.5cm;
        }
        td.test2{
            padding: 0.5cm 2.5cm;  /* 居然还可以试用 cm 这种的单位*/
        }
        td.test3{
            padding-top: 2cm;
        }

        /*  我们来测试*/
    </style>
</head>
<body>
    <h1>Hello</h1>
    <h1>De</h1>
    <h1>Long</h1>
    <table border="1">
        <tr>
            <td class="test1">
                这个表格单元的每个边都拥有相等的内边距。
            </td>
            <td class="test1">
                在写一行测试
            </td>
        </tr>
        <tr>
            <td class="test3">
            </td>
        </tr>
    </table>
    <br/>
    <table border="1">
        <tr>
            <td class="test2">
                这个表格单元的上下和内边距是 0.5cm, 左右边距是 2.5cm。
            </td>
            <td class="test3">
                这个表格单元的的上边距是 2cm
            </td>
        </tr>
    </table>
</body>
</html>